/**
 * 操作记录
 */
<template>
	<vp-card class="w100">
		<template #header>
			<vp-label zh="操作记录" en="Operation Record"/>
		</template>
		<vp-table :data="tableData" :style="{flex: 1, height: height, overflowY: 'auto'}"  v-loading="loading">
			<el-table-column prop="czrmc" width="150">
				<template #header><vp-label zh="操作人" en="Operator"/></template>
			</el-table-column>
			<el-table-column :label="$t('personalArchive.czsj')"  prop="czsj"  width="170">
				<template #header><vp-label zh="操作时间" en="Operation Time"/></template>
			</el-table-column>
			<el-table-column :label="$t('personalArchive.czsm')"  prop="czsm">
				<template #header><vp-label zh="操作说明" en="Operation Description"/></template>
			</el-table-column>
		</vp-table>
	</vp-card>
</template>
<script lang="ts">
import { defineComponent,reactive, toRefs, watch, onMounted} from 'vue'
import request from '/@/utils/request'

export default defineComponent({
    name: 'rcList',
    props: {
        id: String,
		mainId:String,
		height: {
			type: String,
			default: '255px',
		},
    },
    setup(props) {
        const state = reactive({
            loading: false,
            tableData:[],
        })
        const loadData = ()=>{
			if (props.id) {
				state.loading = true
				request.get(`/operateRecord/list?id=`+(props.id||'')+'&mainId='+(props.mainId||'')).then(res => {
					state.tableData = res?.data
				}).finally(()=>{
					state.loading = false
				})
			}
        }
		
		const init = ()=>{		
			loadData();
        }
		
		watch(props, ()=>{		
			loadData()
		})

		onMounted(() => {
			loadData()
		})
		
        return {
            ...toRefs(state),
            ...toRefs(props),
			loadData,
			init
        }
    }
})
</script>
